<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-setting"></i> 账号列表 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-date-picker v-model="query.time" class="mr10" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-select v-model="query.usertype" filterable placeholder="选择账号状态" class="mr10">
          <el-option label="全部" value=""></el-option>
          <el-option label="正常" value="1"></el-option>
          <el-option label="停用" value="0"></el-option>
        </el-select>
        <el-select v-model="query.nametype" filterable placeholder="选择实名状态" class="mr10">
          <el-option label="全部" value=""></el-option>
          <el-option label="未实名" value="0"></el-option>
          <el-option label="个人" value="1"></el-option>
          <el-option label="企业" value="2"></el-option>
        </el-select>
        <el-select v-model="query.rutype" filterable placeholder="选择入驻状态" class="mr10">
          <el-option label="全部" value=""></el-option>
          <el-option label="未入驻" value="0"></el-option>
          <el-option label="已入驻" value="1"></el-option>
        </el-select>
      </div>
      <div class="handle-box">
        <el-input placeholder="请输入姓名查询" class="handle-input mr10" v-model="query.kw"></el-input>
        <el-button class="mr10" type="primary" icon="el-icon-search" @click="souClick">搜索</el-button>
      </div>
      <el-table :data="tableData" border class="table" style="width: 100%" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="uPhone" label="手机号"></el-table-column>
        <el-table-column prop="uPwd" label="密码"></el-table-column>
        <el-table-column label="账号状态" align="center" fixed="right" width="150">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.uStatus == '1'">正常</el-tag>
            <el-tag type="danger" v-if="scope.row.uStatus == '0'">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="实名类型" align="center" fixed="right" width="150">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.authStatus == '0'">未实名</el-tag>
            <el-tag type="success" v-if="scope.row.authStatus == '1'">个人</el-tag>
            <el-tag type="success" v-if="scope.row.authStatus == '2'">企业</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="实名状态" align="center" fixed="right" width="150">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.auditStatus == '0'">待审核</el-tag>
            <el-tag type="success" v-if="scope.row.auditStatus == '1'">通过</el-tag>
            <el-tag type="danger" v-if="scope.row.auditStatus == '2'">未通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="入驻状态" align="center" fixed="right" width="150">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.isSettle == '0'">未入驻</el-tag>
            <el-tag type="success" v-if="scope.row.isSettle == '1'">已入驻</el-tag>
            <el-tag type="danger" v-if="scope.row.isSettle == '2'">入驻未通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <!-- <el-button type="text" icon="el-icon-edit" @click="editClick">编辑</el-button> -->
            <el-button v-if="scope.row.uStatus == '0'" type="text" icon="el-icon-setting" @click="qiClick(scope.row.uId,1)">启用</el-button>
            <el-button v-if="scope.row.uStatus == '1'" type="text" icon="el-icon-setting" class="red" @click="qiClick(scope.row.uId,0)">停用</el-button>
            <el-button v-if="scope.row.authStatus == '1' && scope.row.auditStatus == '0'" type="text" icon="el-icon-view"
                       @click="gerenClick(scope.row.uId)">审核个人实名信息</el-button>
            <el-button v-if="scope.row.authStatus == '2' && scope.row.auditStatus == '0'" type="text" icon="el-icon-view"
                       @click="gongsClick(scope.row.uId)">审核公司实名信息
            </el-button>
            <el-button v-if="scope.row.authStatus == '2' && scope.row.auditStatus == '1' && scope.row.isSettle == '0'" type="text" icon="el-icon-view"
                       @click="ruzhuClick(scope.row.uId)">审核入驻信息</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="query.totalCount"
                       :pager-count="5" @current-change="PageChange" @prev-click="PageChange" @next-click="PageChange"></el-pagination>
      </div>
    </div>
    <!-- 个人实名信息 -->
    <el-dialog title="个人实名信息" :visible.sync="personal.flg" width="40%">
      <el-form ref="form" :model="personal.form" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="personal.form.aName"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="personal.form.aIdCard"></el-input>
        </el-form-item>
        <el-form-item label="身份证正面">
          <el-image style="width: 100px; height: 100px" :src="personal.form.aCardPic" :preview-src-list="[personal.form.aCardPic]" fit="fill">
          </el-image>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="gerenClickShen(personal.form.aId,personal.form.aUserId,2)" :loading="personal.load">审核驳回</el-button>
        <el-button type="primary" @click="gerenClickShen(personal.form.aId,personal.form.aUserId,1)" :loading="personal.load">审核通过</el-button>
      </span>
    </el-dialog>
    <!-- 公司实名信息 -->
    <el-dialog title="公司实名信息" :visible.sync="company.flg" width="40%">
      <el-form ref="form" :model="company.form" label-width="110px">
        <el-form-item label="企业名称">
          <el-input v-model="company.form.comName"></el-input>
        </el-form-item>
        <el-form-item label="公司地址">
          <el-input v-model="company.form.comAddress"></el-input>
        </el-form-item>
        <el-form-item label="统一社会代码">
          <el-input v-model="company.form.comCode"></el-input>
        </el-form-item>
        <el-form-item label="营业执照">
          <el-image style="width: 100px; height: 100px" :src="company.form.comPic" fit="fill" :preview-src-list="[company.form.comPic]">
          </el-image>
        </el-form-item>
        <el-form-item label="法人姓名">
          <el-input v-model="company.form.legalName"></el-input>
        </el-form-item>
        <el-form-item label="法人身份证号">
          <el-input v-model="company.form.legalIdCard"></el-input>
        </el-form-item>
        <el-form-item label="法人电话">
          <el-input v-model="company.form.legalPhone"></el-input>
        </el-form-item>
        <el-form-item label="实际负责人姓名">
          <el-input v-model="company.form.chargeName"></el-input>
        </el-form-item>
        <el-form-item label="负责人身份证号">
          <el-input v-model="company.form.chargeIdCard"></el-input>
        </el-form-item>
        <el-form-item label="负责人电话">
          <el-input v-model="company.form.chargePhone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="gongsClickShen(company.form.aId,company.form.aUserId,2)" :loading="company.load">审核驳回</el-button>
        <el-button type="primary" @click="gongsClickShen(company.form.aId,company.form.aUserId,1)" :loading="company.load">审核通过</el-button>
      </span>
    </el-dialog>
    <!-- 入驻信息 -->
    <el-dialog title="入驻信息" :visible.sync="settle.flg" width="40%">
      <el-form ref="form" :model="settle.form" label-width="110px">
        <el-form-item label="企业名称">
          <el-input v-model="settle.form.comName"></el-input>
        </el-form-item>
        <el-form-item label="公司地址">
          <el-input v-model="settle.form.comAddress"></el-input>
        </el-form-item>
        <el-form-item label="统一社会代码">
          <el-input v-model="settle.form.comCode"></el-input>
        </el-form-item>
        <el-form-item label="营业执照">
          <el-image style="width: 100px; height: 100px" :src="settle.form.comPic" fit="fill" :preview-src-list="[settle.form.comPic]">
          </el-image>
        </el-form-item>
        <el-form-item label="法人姓名">
          <el-input v-model="settle.form.legalName"></el-input>
        </el-form-item>
        <el-form-item label="法人身份证号">
          <el-input v-model="settle.form.legalIdCard"></el-input>
        </el-form-item>
        <el-form-item label="法人电话">
          <el-input v-model="settle.form.legalPhone"></el-input>
        </el-form-item>
        <el-form-item label="实际负责人姓名">
          <el-input v-model="settle.form.chargeName"></el-input>
        </el-form-item>
        <el-form-item label="负责人身份证号">
          <el-input v-model="settle.form.chargeIdCard"></el-input>
        </el-form-item>
        <el-form-item label="负责人电话">
          <el-input v-model="settle.form.chargePhone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ruzhuClickShen(settle.form.aId,settle.form.aUserId,2)" :loading="settle.load">审核驳回</el-button>
        <el-button type="primary" @click="ruzhuClickShen(settle.form.aId,settle.form.aUserId,1)" :loading="settle.load">审核通过</el-button>
      </span>
    </el-dialog>
    <!-- 驳回原因 -->
    <el-dialog title="驳回原因" :visible.sync="reject.flg" width="30%" @close="() => { this.reject.form.text = ''}">
      <el-form ref="form" :model="reject.form" label-width="80px">
        <el-form-item label="驳回原因">
          <el-input type="textarea" :rows="3" v-model="reject.form.text"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reject.flg = false">取消</el-button>
        <el-button type="primary" @click="bohuisub" :loading="reject.load">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { webDuserListInit, webDuserListQiShop, webDuserListuserInit, webDuserListuserShen, webDuserListcompanyInit, webDuserListcompanyShen } from '../../../api/index'
export default {
  data() {
    return {
      query: {
        page: 1,
        limit: 10,
        totalCount: 0,
        kw: '',
        time: [],
        usertype: '',
        nametype: '',
        rutype: '',
      },
      tableData: [],
      //个人实名信息
      personal: {
        flg: false,
        load: false,
        form: {
          aId: '',
          aUserId: '',
          aName: '',
          aIdCard: '',
          aCardPic: '',
        }
      },
      //公司实名信息
      company: {
        flg: false,
        load: false,
        form: {}
      },
      //入驻信息
      settle: {
        flg: false,
        load: false,
        form: {}
      },
      //驳回原因
      reject: {
        flg: false,
        load: false,
        callback: '',//1 个人 2 公司 3 入驻
        form: {}
      },
    }
  },
  created() {
    this.getInit();
  },
  methods: {
    //初始化
    getInit() {
      webDuserListInit({
        page: this.query.page,
        limit: this.query.limit,
        startTime: this.query.time ? this.query.time[0] : '',
        endTime: this.query.time ? this.query.time[1] : '',
        status: this.query.usertype,
        isSettle: this.query.rutype,
        authStatus: this.query.nametype,
        kw: this.query.kw
      }).then(res => {
        if (res.code == 0) {
          this.tableData = res.recordList;
          this.query.totalCount = res.totalCount;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1;
    },
    //搜索
    souClick() {
      this.query.page = 1;
      this.getInit();
    },
    //翻页
    PageChange(num) {
      this.query.page = num;
      this.getInit();
    },
    //启用停用
    qiClick(id, flg) {
      webDuserListQiShop({
        id: id,
        status: flg
      }).then(res => {
        if (res.code == 0) {
          this.$message.success('操作成功');
          this.getInit();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //审核个人初始化
    gerenClick(id) {
      this.personal.form = {
        aId: '',
        aUserId: '',
        aName: '',
        aIdCard: '',
        aCardPic: '',
      };
      webDuserListuserInit({
        userId: id
      }).then(res => {
        if (res.code == 0) {
          this.personal.flg = true;
          this.personal.form.aId = res.auth.aId;
          this.personal.form.aUserId = res.auth.aUserId;
          this.personal.form.aName = res.auth.aName;
          this.personal.form.aIdCard = res.auth.aIdCard;
          this.personal.form.aCardPic = res.auth.aCardPic;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //审核通过不通过
    gerenClickShen(id, userId, flg) {
      if (flg == '1') {
        this.reject.form.text = '';
        this.gerenClickShenSub(id, userId, flg);
      } else {
        this.reject.flg = true;
        this.reject.form = {};
        this.reject.callback = '1';
        this.reject.callbackflg = { id: id, userId: userId, flg: flg };
      }
    },
    //审核个人提交
    gerenClickShenSub(id, userId, flg) {
      this.personal.load = true;
      webDuserListuserShen({
        aId: id,
        aUserId: userId,
        aStatus: flg,
        aFailReason: this.reject.form.text,
      }).then(res => {
        this.personal.load = false;
        this.reject.load = false;
        if (res.code == 0) {
          this.$message.success('操作成功');
          this.personal.flg = false;
          this.reject.flg = false;
          this.getInit();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //审核公司初始化
    gongsClick(id) {
      this.company.form = {};
      webDuserListcompanyInit({
        userId: id
      }).then(res => {
        if (res.code == 0) {
          this.company.flg = true;
          this.company.form = res.auth;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //审核通过不通过
    gongsClickShen(id, userId, flg) {
      if (flg == '1') {
        this.reject.form.text = '';
        this.gongsClickShenSub(id, userId, flg);
      } else {
        this.reject.flg = true;
        this.reject.form = {};
        this.reject.callback = '2';
        this.reject.callbackflg = { id: id, userId: userId, flg: flg };
      }
    },
    //审核公司提交
    gongsClickShenSub(id, userId, flg) {
      this.company.load = true;
      webDuserListcompanyShen({
        aId: id,
        aUserId: userId,
        authStatus: flg,
        authFailReason: this.reject.form.text,
      }).then(res => {
        this.company.load = false;
        this.reject.load = false;
        if (res.code == 0) {
          this.$message.success('操作成功');
          this.company.flg = false;
          this.reject.flg = false;
          this.getInit();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //驳回原因提交
    bohuisub() {
      this.reject.load = true;
      if (this.reject.callback == '1') {
        this.gerenClickShenSub(this.reject.callbackflg.id, this.reject.callbackflg.userId, this.reject.callbackflg.flg);
      } else if (this.reject.callback == '2') {
        this.gongsClickShenSub(this.reject.callbackflg.id, this.reject.callbackflg.userId, this.reject.callbackflg.flg);
      } else if (this.reject.callback == '3') {
        this.ruzhuClickShenSub(this.reject.callbackflg.id, this.reject.callbackflg.userId, this.reject.callbackflg.flg);
      }
    },
    //审核入驻初始化
    ruzhuClick(id) {
      this.settle.form = {};
      webDuserListcompanyInit({
        userId: id
      }).then(res => {
        if (res.code == 0) {
          this.settle.flg = true;
          this.settle.form = res.auth;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //审核通过不通过
    ruzhuClickShen(id, userId, flg) {
      if (flg == '1') {
        this.reject.form.text = '';
        this.ruzhuClickShenSub(id, userId, flg);
      } else {
        this.reject.flg = true;
        this.reject.form = {};
        this.reject.callback = '3';
        this.reject.callbackflg = { id: id, userId: userId, flg: flg };
      }
    },
    //审核入驻提交
    ruzhuClickShenSub(id, userId, flg) {
      this.settle.load = true;
      webDuserListcompanyShen({
        aId: id,
        aUserId: userId,
        settleStatus: flg,
        settleFailReason: this.reject.form.text,
      }).then(res => {
        this.settle.load = false;
        this.reject.load = false;
        if (res.code == 0) {
          this.$message.success('操作成功');
          this.settle.flg = false;
          this.reject.flg = false;
          this.getInit();
        } else {
          this.$message(res.msg);
        }
      })
    },
  }
}
</script>
<style scoped>
.handle-input {
    width: 300px;
    display: inline-block;
}
.red {
    color: red;
}
</style>